<template>
    <view>
        <swiper class="rotation-text" autoplay="true"
                interval="10000"
                duration="1000"
                circular="true"
                disable-touch="true"
                vertical="true">
            <swiper-item v-for="(item,index) in demandMessage" :key="index">
                <swiper class="rotation-text" autoplay="true"
                        :interval="(10000/item.length)"
                        duration="0"
                        circular="true"
                        disable-touch="true">
                    <swiper-item v-for="(items,indexs) in item" :key="indexs">
                        <text>{{items}}</text>
                    </swiper-item>
                </swiper>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        name: "homeDynamic",
        props:{
            demandMessage:{
                require: true
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .rotation-text{
        width: calc(100vw - 100rpx);
        height: 40rpx;
        text{
            @include ellipsis(1);
            width: calc(100% - 10rpx);
            padding: 0 5rpx;
            font-size: 28rpx;
            line-height: 40rpx;
            height: 40rpx;
            color: rgba(255, 101, 101, 1);
        }
    }
</style>